import { Modal, Upload, Icon, Button, message } from "antd";
import React from "react";
import { uploadToQiniu } from "@/utils/qiniuUpload";

const uploadButtonPicture = (
  <Button>
    <Icon type="upload" /> Upload
  </Button>
);

const uploadButtonPictureCard = (
  <div>
    <Icon type="plus" />
    <div className="ant-upload-text">Upload</div>
  </div>
);

export default class CreateUpdateForm extends React.Component {
  static defaultProps = {
    previewVisible: false,
    previewImage: "",
    fileList: [],
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  handleUploadFiles = async ({ fileList }) => {
    const { onChange } = this.props;
    const files = fileList.map((item) => {
      return item.originFileObj;
    });
    const imagesList = [];
    files.forEach(async (item, index) => {
      await uploadToQiniu(item, () => {})
        .then((response) => {
          imagesList.push({
            uid: index,
            annexUrl: response,
          });
        })
        .catch((e) => {
          console.log(e, "catch");
        });
    });
    uploadToQiniu(file.file, () => {})
      .then((response) => {
        this.companyUserDetail.zbCompanyResponse.businessLicenseUrl = response;
      })
      .catch((e) => {
        console.log(e, "catch");
      });
    onChange(imagesList);
  };

  getBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });
  };

  handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await this.getBase64(file.originFileObj);
    }
    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handleCancel = () => this.setState({ previewVisible: false });

  beforeUpload = (file) => {
    const isJpgOrPng =
      file.type === "image/jpg" ||
      file.type === "image/jpeg" ||
      file.type === "image/png" ||
      file.type === "image/bmp";
    if (!isJpgOrPng) {
      message.error("You can only upload JPG/JPEG/PNG/BMP file!");
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error("Image must smaller than 2MB!");
    }
    return isJpgOrPng && isLt2M;
  };

  render() {
    const { fileList, listType, maxNum } = this.props;
    const { previewVisible, previewImage } = this.state;
    return (
      <div>
        <Upload
          listType={listType}
          fileList={fileList}
          onChange={this.handleUploadFiles}
          onPreview={this.handlePreview}
          beforeUpload={this.beforeUpload}
        >
          {fileList.length >= maxNum
            ? null
            : listType == "picture"
            ? uploadButtonPicture
            : uploadButtonPictureCard}
        </Upload>
        <Modal
          visible={previewVisible}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: "100%" }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}
